@use '@material/tab' as mdc-tab;
@use '../../material/core/style/variables';
@use '../../material/core/style/private';
@use '../mdc-helpers/mdc-helpers';
@use './tabs-common';

@include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
@include tabs-common.tab-ripple;

.mat-mdc-tab {
  @include tabs-common.tab;

  // Note that we only want to target direct descendant tabs. Also note that
  // `mat-stretch-tabs` is part of the public API so it should not be changed to `mat-mdc-`.
  .mat-mdc-tab-group[mat-stretch-tabs] > .mat-mdc-tab-header & {
    flex-grow: 1;
  }
}

// MDC doesn't support disabled tabs so we need to improvise.
.mat-mdc-tab-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mat-mdc-tab-group {
  display: flex;
  flex-direction: column;

  &.mat-mdc-tab-group-inverted-header {
    flex-direction: column-reverse;

    .mdc-tab-indicator__content--underline {
      align-self: flex-start;
    }
  }
}

// The bottom section of the view; contains the tab bodies
.mat-mdc-tab-body-wrapper {
  @include private.private-animation-noop();
  position: relative;
  overflow: hidden;
  display: flex;
  transition: height tabs-common.$mat-tab-animation-duration variables.$ease-in-out-curve-function;
}
